<template>
  <div class="inner">
    <PageTitle title="装箱出库" />
    <div class="ibody">
      <div class="ib-cont">
        <div class="btn-group">
          <!-- <el-date-picker
            v-model="searchDate"
            type="date"
            placeholder="选择日期"
            :shortcuts="shortcuts"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          /> -->
          <whDatePicker @change="dateChange" />

          <div
            class="wh-btn border-solid primary"
            @click="createNewJHOrder"
            size="large"
          >
            新建装箱
          </div>
        </div>
        <div class="data-table mt20" v-if="outboundData">
          <el-table
            :data="outboundData.list"
            style="width: 100%"
            header-row-class-name="table-header-row"
            row-class-name="table-normal-row"
          >
            <el-table-column prop="packageNo" label="装箱单号" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column prop="shippingTime" label="发货时间" />
            <el-table-column prop="orderfillCount" label="包裹数" />
            <el-table-column prop="distributor" label="配送商" />
            <el-table-column prop="status" label="状态" />
            <el-table-column label="操作">
              <template #default="scope">
                <div
                  class="wh-btn border-solid"
                  @click="goDetailPage(scope.row.packageId)"
                >
                  查看
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination" v-if="outboundData">
          <el-pagination
            layout="prev, pager, next"
            :total="outboundData.total"
            @current-change="pageCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import PageTitle from "@/components/PageTitle.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getOutboundListApi } from "@/api/outbound";
import dayjs from "dayjs";
import { useUserStoreHook } from "@/store/modules/user";
import { saveStorage, getStorage } from "@/utils/storage";
import whDatePicker from "@/components/whDatePicker.vue";
const userStore = useUserStoreHook();
const warehouseId = userStore.userInfo.warehouseId;
// 分页相关数据
const skip = ref(0);
const limit = ref(25);

// const today = getStorage("boxlist-searchData") || dayjs().format("YYYY-MM-DD");
const today = dayjs().format("YYYY-MM-DD");
const searchDate = ref(today);

const router = useRouter();
const shortcuts = [
  {
    text: "今天",
    value: new Date()
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    }
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    }
  }
];

const outboundData = ref();
async function getOutboundList() {
  saveStorage("boxlist-searchData", searchDate.value);
  const queryObj = {
    warehouseId,
    queryDate: searchDate.value,
    skip: skip.value,
    limit: limit.value
  };
  outboundData.value = await getOutboundListApi(queryObj);
}
function pageCurrentChange(val) {
  skip.value = limit.value * val - 1;
  getOutboundList();
}
function dateChange(value) {
  searchDate.value = value;
  getOutboundList();
}
function createNewJHOrder() {
  router.push({ path: "/box/create", query: { editType: "new" } });
}

function goDetailPage(packageId) {
  router.push({ path: "/box/create", query: { packageId, editType: "edit" } });
}

onMounted(() => {
  getOutboundList();
});
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
.inner {
  .ibody {
    .ib-cont {
      background-color: white;
      border-radius: 10px;
      padding: 30px;
      .btn-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        :deep(.el-date-editor) {
          width: 200px;
          height: 50px;
          color: #3f4254;
          background: #f9f9f9;
          .el-input__wrapper {
            height: 50px;
            color: #3f4254;
            background: #f9f9f9;
            .el-icon {
              font-size: 24px;
              color: #3f4254;
            }
          }
        }
        .wh-btn {
          width: 200px;
        }
      }
      :deep(.data-table) {
        margin-top: 40px;
        .table-header-row {
          font-size: 18px;
          font-weight: bold;
          text-align: right;
          letter-spacing: 0em;
          color: #b5b5c3;
          border-style: dashed;
          min-height: 80px;
        }
        .table-normal-row {
          border-bottom: 1px dashed #d8d8d8;
          min-height: 80px;
          &::after {
            display: none;
          }
          &::before {
            display: none;
          }
        }
        .el-table__cell {
          border-bottom: 1px dashed #d8d8d8 !important;
        }
        .pagination {
          display: flex;
          margin-top: 20px;
          justify-content: flex-end;
        }
      }
    }
  }
}
.create-sort-dialog {
  .el-radio__input {
    display: none;
  }
  .label {
    text-align: right;
    padding-right: 10px;
    height: 40px;
    line-height: 40px;
  }
  .btn-wrap {
    text-align: center;
  }
}
</style>
